<template>
  
  <view v-if="loading"> <!-- 判断是否正在处于加载状态-->
    <loading1></loading1> <!-- 加载动画 -->
  </view>
  
  <view v-else class="container container18836">

    <tabbar1></tabbar1>

    <view class="flex flex-wrap diygw-col-24 flex-direction-column flex9-clz"> </view>
    <!-- 文章列表 -->
    <view v-for="a,index in page.articles" class="flex flex-wrap diygw-col-24 flex-direction-column flex6-clz">
      <!-- <u-loading-icon></u-loading-icon> -->
      <view @click="toArticleDetail(index)" class="flex diygw-col-24">
        <view class="diygw-list">
          <view style="" class="diygw-item col-100 row solid-bottom">
            <view class="diygw-avatar">
              <!-- <image mode="aspectFit" class="diygw-avatar-img" src="../../static/icon1_rm.png"></image> -->
			  <image mode="aspectFit" class="diygw-avatar-img" :src="a.avatar"></image>
            </view>
            <view class="content">
              <view class="title"> {{a.title}} </view>
              <view class="text-sm remark"> {{a.createTime}} </view>
            </view>
          </view>
        </view>
      </view>

      <text @click="toArticleDetail(index)" space="ensp" decode='true'  class="diygw-col-24 text4-clz">{{a.content}} </text>

      <view @click="toArticleDetail(index)" class="flex diygw-col-24 items-center flex-nowrap flex7-clz">
        <image v-for="i in a.imgs" :src="i" class="diygw-image diygw-col-0 image-clz"
          style="height: 80px !important; width: 100% !important" mode="widthFix"></image>
      </view>
      <view class="flex diygw-col-24 justify-between">
        <view class="diygw-tag md radius">
          <text style="padding-left: " class="diygw-icon diy-icon-share"></text>
          <!-- <text> 1000 </text> -->
        </view>
        <view @click="toArticleDetail(index)" class="diygw-tag md radius">
          <!-- 点击事件传递参数  toArticleDetail(a.id)传入不了   -->
          <text style="padding-left: " class="diygw-icon diy-icon-comment"></text>
          <text style="padding-left: 2vw"> {{a.commentCount}} </text>
        </view>
        <view class="diygw-tag md radius">
          <text style="padding-left: " class="diygw-icon diy-icon-appreciate"></text>
          <text> {{a.pick}} </text>
        </view>
      </view>
      <view class="flex diygw-col-24">
        <view class="diygw-pzx" style="border-bottom: 5px solid #eee"></view>
      </view>
    </view>


    <view class="clearfix"></view>

    <u-icon name="photo" color="#2979ff" size="28"></u-icon>

    <view class="send-view"> <!-- 发帖-->
      <image @click="send()" class="sendArticle" src="../../static/发帖.png"></image>
    </view>

  </view>
  


</template>

<script>
  import tabbar1 from "../../components/com/com-tabbar.vue"
  import loading1 from "../../components/kg-loading/loading1.vue"
  export default {
    components: {
      tabbar1,
      loading1
    },
    data() {
      return {
        loading : true,
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: {},
        page: {
          currentPage: 1,
          pageSize: 5,
          total: 0,
          articles: []
        }
      };
    },
    created() {
      this.getArticlesList();
    },
    onShow() {
      // this.setCurrentPage(this);
    },
    onLoad(option) {
      // this.setCurrentPage(this);
      // if (option) {
      //   this.setData({
      //     globalOption: this.getOption(option)
      //   });
      // }

      this.init();
    },
    methods: {
      async init() {},
      send() {
        //跳转到sned页
        uni.navigateTo({
          url: '../send'
        });
      },
      toArticleDetail(index) {
        //将选中的文章id存入缓存
        let id = this.page.articles[index].id;
        // uni.setStorageSync('articleId',id);
        //跳转到详情页,页面传参
        uni.navigateTo({
          url: '../index/dynamicInfo?articleId=' + id
        });
      },
      getArticlesList() {
        uni.request({
          // url: 'http://127.0.0.1:8091/mhs/article/list',
          url: 'http://127.0.0.1:800/mhs/article/list',
          method: 'GET',
          header: {
            'token': uni.getStorageSync('token') //携带token
          },
          success: (res) => {
            if (res.data.code == 1) {
              let result = res.data.data;
              console.log(result);
              //`http://127.0.0.1:8091/mhs/article/download?name=${res1.data}`;
              this.page.articles = result.records;
              this.page.total = result.total;
              console.log(this.page);
              this.loading = false;
            } else {
              if (res.data.code == 401) {
                uni.showModal({
                  title: 'token已过期,请重新登陆',
                  content: '即将跳转登陆页',
                  success: function(res) {
                    if (res.confirm) {
                      uni.navigateTo({
                        url: '../login/login'
                      });
                    } else if (res.cancel) {
                      console.log('用户点击取消');
                    }
                  }
                });

              }
            }
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../common/diygw-ui/iconfont.scss';
  @import '../../common/diygw-ui/animate.css';
  @import '../../common/diygw-ui/index.scss';

  .send-view {
    width: 10vw;
    height: 10vw;
    position: fixed; //把这个组件固定,使他不跟随滑动
    bottom: 20vw;
    right: 10vw;
  }

  .sendArticle {
    width: 100%;
    height: 100%;
  }

  .flex-clz {
    padding-top: 2px;
    box-shadow: 0px 1px 4px 2px rgba(31, 31, 31, 0.16);
    overflow: visible;
    left: 0px;
    bottom: 0px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-right: 2px;
  }

  .icon1-clz {
    color: #767272;
  }

  .icon1 {
    font-size: 32px;
  }

  .icon2-clz {
    color: #767272;
  }

  .icon2 {
    font-size: 32px;
  }

  .flex4-clz {

    margin-left: 0px;
    margin-top: -18px;
    margin-bottom: 0px;
    margin-right: 0px;
  }

  .icon3-clz {
    background-color: #f1f1f1;
    padding-top: 8px;
    border-bottom-left-radius: 1000px;
    overflow: hidden;
    padding-left: 8px;
    padding-bottom: 8px;
    border-top-left-radius: 1000px;
    border-top-right-radius: 1000px;
    border-bottom-right-radius: 1000px;
    padding-right: 8px;
  }

  @keyframes tiaodong {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-0.8rem);
    }
  }

  .tiaodong {
    animation: tiaodong 3s ease-in-out infinite;
  }

  .icon3 {
    font-size: 32px;
  }

  .icon-clz {
    color: #767272;
  }

  .icon {
    font-size: 32px;
  }

  .text-clz {
    padding-top: 2px;
    border-bottom-left-radius: 60px;
    z-index: 1;
    color: #ffffff;
    padding-left: 3px;
    font-size: 10rpx !important;
    padding-bottom: 2px;
    border-top-right-radius: 60px;
    right: -5px;
    background-color: #ff0000;
    overflow: hidden;
    top: -5px;
    border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
    position: absolute;
    padding-right: 3px;
  }

  .icon4-clz {
    color: #767272;
  }

  .icon4 {
    font-size: 32px;
  }

  .text4-clz {
    font-size: 5vw;
    padding-top: 5px;
    padding-left: 10px;
    padding-bottom: 5px;
    padding-right: 10px;
  }

  .image-clz {
    margin-left: 8px;
    border-bottom-left-radius: 10px;
    overflow: hidden;
    flex: 1;
    border-top-left-radius: 10px;
    margin-top: 8px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 8px;
    margin-right: 8px;
  }

  .image2-clz {
    margin-left: 8px;
    border-bottom-left-radius: 10px;
    overflow: hidden;
    flex: 1;
    border-top-left-radius: 10px;
    margin-top: 8px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 8px;
    margin-right: 8px;
  }

  .text6-clz {
    padding-top: 0px;
    padding-left: 10px;
    padding-bottom: 0px;
    padding-right: 10px;
  }

  .image1-clz {
    margin-left: 8px;
    border-bottom-left-radius: 10px;
    overflow: hidden;
    flex: 1;
    border-top-left-radius: 10px;
    margin-top: 8px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 8px;
    margin-right: 8px;
  }

  .image3-clz {
    margin-left: 8px;
    border-bottom-left-radius: 10px;
    overflow: hidden;
    flex: 1;
    border-top-left-radius: 10px;
    margin-top: 8px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 8px;
    margin-right: 8px;
  }

  .container18836 {
    padding-left: 0px;
    padding-right: 0px;

    font-size: 12px;
  }

  .container18836 {}
</style>